//Vue组件,组件名只能用小写字母
Vue.component("damai",{
    //模板 => 封装的网络内容,反引号，数字键1左边的按键
    template:`
<div>
    <div class="container header">
    
    
        <div class="span5">
            <div class="logo">
                <a href="index.html">
                    <img src="image/r___________renleipic_01/logo.png" alt="依依不舍"/>
                </a>
            </div>
        </div>
        <div class="span9">
        <div class="headerAd">
        <img src="image/header.jpg" width="320" height="50" alt="正品保障" title="正品保障"/>
        </div>	</div>
        <div class="span10 last">
            <div class="topNav clearfix">
                <ul>
    
                        <li v-if="myinfo" id="headerLogin" class="headerLogin" style="display: list-item;">
                        {{myinfo.name}}|
                        </li>
                        <li v-if="myinfo" id="headerLogin" class="headerLogin" style="display: list-item;">
                            <a href="olist.html">我的订单</a>|
                        </li>
                        <li v-if="myinfo" id="headerRegister" class="headerRegister" style="display: list-item;">
                        <a href="/user/logout">退出</a>|
                        </li>
                        
                        <li v-if="!myinfo" id="headerRegister" class="headerRegister" style="display: list-item;">
                        <a href="reg.html">注册</a>|
                        </li>
                        <li v-if="!myinfo" id="headerRegister" class="headerRegister" style="display: list-item;">
                        <a href="login.html">登录</a>|
                        </li>
                    
                    
    
    
    
    
                    <li id="headerUsername" class="headerUsername"></li>
                    <li id="headerLogout" class="headerLogout">
                        <a>[退出]</a>|
                    </li>
                            <li>
                                <a>会员中心</a>
                                |
                            </li>
                            <li>
                                <a>购物指南</a>
                                |
                            </li>
                            <li>
                                <a>关于我们</a>
    
                            </li>
                </ul>
            </div>
            <div class="cart">
                <a  href="cart.html">购物车</a>
            </div>
                <div class="phone">
                \t客服热线:
                    <strong>96008/53277764</strong>
                </div>
        </div>
    
    
    
        <div class="span24">
            <ul class="mainNav">
                        <li>
                            <a href="index.html">我的首页</a>
                            |
                        </li>
    
                        <li v-for="c in categories">
        <a :href="'clist.html?cid=' + c.cid">
                    	\t{{c.cname}}
        </a>
                        |</li>
    
            </ul>
        </div>
    
    
        </div>
    <slot>内容插槽
    </slot>
    <div class="container footer">
        <div class="span24">
            <div class="footerAd">
                        <img src="image/footer.jpg" width="950" height="52" alt="我们的优势" title="我们的优势">
        </div>	</div>
        <div class="span24">
            <ul class="bottomNav">
                        <li>
                            <a>关于我们</a>
                            |
                        </li>
                        <li>
                            <a>联系我们</a>
                            |
                        </li>
                        <li>
                            <a>招贤纳士</a>
                            |
                        </li>
                        <li>
                            <a>法律声明</a>
                            |
                        </li>
                        <li>
                            <a>友情链接</a>
                            |
                        </li>
                        <li>
                            <a>支付方式</a>
                            |
                        </li>
                        <li>
                            <a>配送方式</a>
                            |
                        </li>
                        <li>
                            <a>服务声明</a>
                            |
                        </li>
                        <li>
                            <a>广告声明</a>
    
                        </li>
            </ul>
        </div>
        <div class="span24">
            <div class="copyright">Copyright © 2005-2013 大麦商城 版权所有</div>
        </div>
        </div>
</div>
    `,
    data(){
        return {
            categories : [],
            myinfo:null
        };
    },
    created(){
        axios.get("/category/queryAll").then(res=>{
            this.categories = res.data;
        });
        axios.get("/user/myinfo").then(res=>{
            if(res.data.code == 1){
                this.myinfo = res.data.data;
            }else {
                this.myinfo = null;
            }
        })

    }
});

Vue.component("category",{
    template: `
    <div class="span6">
				<div class="hotProductCategory">
					<dl v-for="c in categories">
						<dt>
							<a :href="'clist.html?cid=' + c.cid">{{c.cname}}</a>
						</dt>

						<dd v-for="cs in c.categoryseconds">
						    <a :href="'clist.html?csid=' + cs.csid">{{cs.csname}}</a>
						</dd>
					</dl>
				</div>
			</div>
    `,
    data(){
        return{
            categories:[]
        }
    },
    created(){
        axios.get("/category/queryAll").then(res=>{
            this.categories = res.data;
        });
    }
})